<!--分产品分专业-->
<template>
    <div class="fenqy">
        <div class="operation">
            <el-form
                :inline="true"
                :model="form"
                label-width="80px"
                class="formList"
            >
                <el-form-item label="选择区域">
                    <dx-cascader :area_id.sync="form.areaId" />
                </el-form-item>
                <el-form-item label="账期">
                    <el-date-picker
                        v-model="form.month"
                        value-format="yyyyMM"
                        type="month"
                        placeholder="选择月"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item style="width: 40%" label-width="0px">
                   <el-button size="small" type="primary" @click="handle_search()"
                        >查询</el-button
                    >
                    <el-button
                        size="small"
                        type="orange"
                        @click="exportExcel(true)"
                        >分区域批量导出</el-button
                    >
                    <el-button
                        size="small"
                        type="orange"
                        @click="exportPro()"
                        >分产品批量导出</el-button
                    >
                    <el-button
                        size="small"
                        type="orange"
                        @click="exportExcel(false)"
                        >导出</el-button
                    >
                </el-form-item>
            </el-form>
        </div>
        <div style="border-bottom:1px solid #EBEEF5;" class="tableBox">
            <el-table
                ref="table"
                v-loading="tableLoading"
                :data="tableData"
                style="width: 100%"
                class="tableTh28"
                height="65vh"
                border
                stripe
                :span-method="arraySpanMethod"
            >
                <el-table-column
                    fixed
                    prop="indexType"
                    label="项目"
                    class-name="firstProject"
                    width="80px"
                ></el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    fixed
                    prop="indexName"
                    label="项目"
                    class-name="secondProject"
                    width="120px"
                ></el-table-column>
                <el-table-column label="还原大收口径">
                    <el-table-column prop label="月度环比情况">
                        <el-table-column
                            class-name="right-money"
                            width="116px"
                            prop="thisMonthAchievement"
                            label="本月实绩"
                        ></el-table-column>
                        <el-table-column
                            class-name="right-money"
                            width="116px"
                            prop="lastMonthAchievement"
                            label="上月实绩"
                        ></el-table-column>
                        <el-table-column
                            class-name="right-money"
                            width="116px"
                            prop="sequentialGrowth"
                            label="环比上月增加额"
                        ></el-table-column>
                    </el-table-column>
                    <el-table-column prop label="累计同比情况">
                        <el-table-column
                            class-name="right-money"
                            width="116px"
                            prop="thisYearTotal"
                            label="本年累计"
                        ></el-table-column>
                        <el-table-column
                            class-name="right-money"
                            width="116px"
                            prop="lastYearTotal"
                            label="上年同期累计"
                        ></el-table-column>
                        <el-table-column
                            class-name="right-money"
                            width="116px"
                            prop="yearOnYearChange"
                            label="同比变化"
                        ></el-table-column>
                        <el-table-column
                            width="116px"
                            prop="yearOnYearGrowth"
                            label="同比增长率"
                        ></el-table-column>
                        <el-table-column
                            width="116px"
                            prop="growthSort"
                            label="收入拉动"
                        ></el-table-column>
                    </el-table-column>
                    <el-table-column prop label="预算完成情况">
                        <el-table-column
                            class-name="right-money"
                            width="116px"
                            prop="thisYearTotalBudget"
                            label="本年累计"
                        ></el-table-column>
                        <el-table-column
                            class-name="right-money"
                            width="116px"
                            prop="monthTotalBudget	"
                            label="月累计预算"
                        ></el-table-column>
                        <el-table-column
                            class-name="right-money"
                            width="116px"
                            prop="breachBudget"
                            label="缺口"
                        ></el-table-column>
                        <el-table-column
                            class-name="right-money"
                            width="116px"
                            prop="completeTotal"
                            label="完成累计预算"
                        ></el-table-column>
                        <el-table-column
                            class-name="right-money"
                            width="116px"
                            prop="thisYearBudget"
                            label="本年预算"
                        ></el-table-column>
                        <el-table-column
                            class-name="right-money"
                            width="126px"
                            prop="completeYearBudget"
                            label="累计完成年度预算"
                        ></el-table-column>
                    </el-table-column>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import { $budgetAPI } from "@/api";
import { getSessionStorage } from "@/common/js/storage";
import { mergeSpan } from "@/utils/mixin.js";
import { getCookie } from "@/common/js/cookie";
import prefixAPI from "@/api/prefixAPI";
const exportUrl = prefixAPI.pack;

let accountInfo = JSON.parse(getSessionStorage("accountInfo"));

export default {
    name: "fenqy",
    props: {},
    data() {
        return {
            form: {
                areaId: accountInfo.areaId,
                month: this.moment()
                    .subtract(1, "months")
                    .format("YYYYMM")
            },
            accountInfo: "",
            tableLoading: false,
            tableData: [],
            count: "",
            tableTemp: []
        };
    },
    created() {
        this.init();
        // this.getMaxAcctMonthByPro();
    },
    methods: {
        handle_search() {
          this.getData();
        },
        async init() {
            this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
            this.form.month = await this.getMonth();

            // this.submitHandle();
            this.getData();

        },
        getMonth() {
            return new Promise(resolve=>{
                $budgetAPI.getAnalysizTime({}, res=>{
                    if(res && res.code == 0){
                        resolve(res.content)
                    }
                  
                }) 
            })
        },
        getData() {
            var that = this;
          
                $budgetAPI.getAnalysizData({
                    areaId: that.form.areaId,
                    month: that.form.month
                }, res => {
                    if(res && res.code == 0){
                        this.spanArr = mergeSpan(res.content, ["indexType", "indexName"]);
                        this.tableData = res.content;
                    }
                    
                }) 
        },
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0 || columnIndex === 1) {
                return this.spanArr[rowIndex][columnIndex]
            }
        },
        exportExcel(type) {
          var areaId = this.form.areaId,
                month = this.form.month,
                token = getCookie("token");

                window.open(`${exportUrl}/TrendIncomeTrack/ExportIncomeProduct?areaId=${areaId}&month=${month}&token=${token}&type=${type}`, "_self");
                
        },
        exportPro() {
            var areaId = this.form.areaId,
                month = this.form.month,
                token = getCookie("token");

                window.open(`${exportUrl}/TrendIncomeTrack/ExportBatchIncomeDataByProd?areaId=${areaId}&month=${month}&token=${token}`, "_self");
        }
    }
};
</script>
<style lang="scss" scoped></style>
<style lang="scss">
.fenqy {
    .firstProject,
    .secondProject {
        .cell {
            color: #000;
            font-weight: 700;
        }
    }
    .firstProject.is-leaf {
        position: relative;
        border-right: 1px solid #d7e5fb !important;
        .cell {
            color: #d7e5fb;
        }
    }
    .secondProject.is-leaf {
        overflow: visible;
        // border-left: 2px solid #d7e5fb;
        .cell {
            transform: translateX(-38%);
        }
    }
    // .el-table--border td {
    //   border-right: 1px solid #ebeef5 !important;
    // }
    // .operation {
    //   .daochu {
    //     float: right;
    //     .el-form-item__content {
    //       width: 200px;
    //       float: right;
    //       .el-button {
    //         float: right;
    //       }
    //     }
    //   }
    // }
}
</style>
